<template>
  <el-card
    class="card"
    shadow="never"
  >
    <div
      slot="header"
      class="header"
    >
      <span>{{ title }}</span>
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
        @click.stop="more"
      >更多
        <img
          :src="moreImg"
          alt=""
        >
      </el-button>
    </div>
    <div class="container">
      <div class="box">
        <div class="label">
          {{ labelName }}:<span>{{ totalNum }}</span>{{ unit }}
        </div>
        <div
          :id="id"
          :style="[style]"
          _echarts_instance_="123"
        ></div>
      </div>
      <slot></slot>
    </div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";
import random from "@/utils/random";

export default {
  name: "echartsBox",
  props: {
    moreImg: {
      type: String,
      default: require("../../assets/images/enterprisePersonnelPositionManage/more.png")
    },
    title: {
      type: String,
      default: "辖内企业接入数量",
    },
    echartsStyle: {
      type: Object,
      default: () => {
        return { flex: "5", height: "180px" };
      },
    },
    labelName: {
      type: String,
      default: "总数",
    },
    totalNum: {
      type: Number,
      default: 0,
    },
    unit: {
      type: String,
      default: "",
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // data附带的属性
    dataAttributes: {
      type: Array,
      default: () => {
        return [
          {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: "#8E7DFF" },
                { offset: 1, color: "#CDA2FF" },
              ]),
            },
            label: {
              show: true,
              formatter: "{a|{b}}\n{hr|}",
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  padding: [-30, 15, -20, 15],
                  color: "#8C7CFF",
                },
              },
            },
          },
          {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: "#FFC4A7" },
                { offset: 1, color: "#FF8B6A" },
              ]),
            },
            label: {
              show: true,
              position: "outside",
              align: "left",
              formatter: "{a|{b}}\n{hr|}",
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  padding: [-30, 150, -20, 15],
                  color: "#FF8A69",
                },
              },
            },
          },
        ];
      },
    },
    echartsOption: {
      typeof: Object,
      default: () => {
        return {
          title: {
            text: "接入率\n97%",
            x: "center",
            y: "center",
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c}",
          },
          series: [
            {
              name: "接入率",
              type: "pie",
              radius: ["50%", "60%"],
              labelLine: {
                show: true,
                length: 20,
                length2: 30,
              },
              center: ["50%", "50%"],
              startAngle: 360,
              data: [],
            },
          ],
        };
      },
    },
  },
  computed: {
    id () {
      return random.guid();
    },
    style () {
      let style = {};
      if (this.echartsStyle.height == undefined) {
        style.height = "180px";
      }
      return Object.assign(style, this.echartsStyle);
    },
    echartsAutoOption () {
      let option = this.echartsOption;
      if (!option.title) {
        option.title = {
          text: this.labelName + "\n" + this.totalNum + this.unit,
          x: "center",
          y: "center",
        };
      }
      if (!option.tooltip) {
        option.tooltip = {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c}",
        };
      }
      if (!option.series) {
        option.series = [
          {
            name: "接入率",
            type: "pie",
            radius: ["50%", "60%"],
            labelLine: {
              show: true,
              length: 20,
              length2: 30,
            },
            center: ["50%", "50%"],
            startAngle: 360,
            data: [],
          },
        ];
      }
      let data = this.data;
      data.forEach((item, index) => {
        let length = this.dataAttributes.length;
        item = Object.assign(item, this.dataAttributes[index % length]);
      });
      option.series[0].data = data;
      return option;
    },
  },
  mounted () {
    this.echartsInit();
    let that = this;
    setTimeout(()=>{
      if(that.IEVersion() == -1){
        // 非ie 开启监听
        that.resizeObserver(entry=>{
          if(that.resizeWidth != entry.target.offsetWidth){
            that.resizeWidth = entry.target.offsetWidth;
            try {
              that.echartsInit();
            } catch (error) {
              console.warn(error);
            }
          }
        })
      }
    },500)
  },
  deactivated () {
    let that = this;
    setTimeout(()=>{
      if(that.IEVersion() == -1){
        // 非ie 关闭监听
        that.resizeMain && that.resizeMain.disconnect();
      }
    },500)
  },
  resizeWidth: 0,
  resizeMain:null,
  methods: {
    resizeObserver(callback){
      const ResizeObserver = window.ResizeObserver || window.WebKitResizeObserver || window.MozResizeObserver;
      const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          typeof callback === 'function' && callback(entry,entries,this,this.resizeMain)
        }
      });
      this.resizeMain = resizeObserver.observe(this.$el);
    },
    echartsInit () {
      let echartsContainer = document.getElementById(this.id);
      try {
        echarts.init(echartsContainer).dispose(); // 销毁实例
      } catch (error) {
        console.warn(error)
      }
      echarts.init(echartsContainer).setOption(this.echartsAutoOption);
    },
    more (event) {
      this.$emit("more", event);
    },
    IEVersion () {
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
      var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
      var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
      var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; //判断是否IE11浏览器
      if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (fIEVersion == 7) {
          return 7;
        } else if (fIEVersion == 8) {
          return 8;
        } else if (fIEVersion == 9) {
          return 9;
        } else if (fIEVersion == 10) {
          return 10;
        } else {
          return 6;//IE版本<=7
        }
      } else if (isEdge) {
        return 'edge';//edge
      } else if (isIE11) {
        return 11; //IE11
      } else {
        return -1;//不是ie浏览器
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.card {
  font-family: Microsoft YaHei;
  :deep .el-card__header {
    width: 100%;
    height: 56px;
    background: linear-gradient(90deg, #6aa5ff 0%, #9fc9fc 100%);
    border: none;
    color: #ffffff;
    padding: 0 20px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56px;
      .el-button--text span {
        width: 56px;
        color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  :deep .el-card__body {
    padding: 0;
    color: #3c4c70;
  }
  .container {
    .box {
      display: flex;
      justify-content: space-between;
      .label {
        font-size: 20px;
        font-weight: 400;
        color: #3c4c70;
        max-width: 160px;
        min-width: 160px;
        padding: 26px 0 0 22px;
        span {
          padding: 0 10px;
          color: #3c4c70;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
